<!DOCTYPE HTML>
<html lang="en">

<head>
    <title>个人简历</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--    <script type="application/x-javascript">-->
    <!--    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);-->

    <!--    function hideURLbar() { window.scrollTo(0, 1); }-->
    <!--    </script>-->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
{#    <link href="css/style.css" rel='stylesheet' type='text/css'/>#}
    <!--    <link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>-->
    <!--    <link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>-->
    <!-- start menu -->
    <style>
        /*
 * Base structure
 */

        /* Move down content because we have a fixed navbar that is 50px tall */
        body {
            padding-top: 50px;
        }

        /*
         * Global add-ons
         */

        .sub-header {
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        /*
         * Top navigation
         * Hide default border to remove 1px line.
         */
        .navbar-fixed-top {
            border: 0;
        }

        /*
         * Sidebar
         */

        /* Hide for mobile, show later */
        .sidebar {
            display: block;

        }

        @media (min-width: 768px) {
            .sidebar {
                position: fixed;
                top: 51px;
                bottom: 0;
                left: 0;
                z-index: 1000;
                display: block;
                padding: 20px;
                /*overflow-x: hidden;*/
                /*overflow-y: auto; !* Scrollable contents if viewport is shorter than content. *!*/
                background-color: #f5f5f5;
            }

            .main {
                padding-right: 40px;
                padding-left: 40px;
            }

            .project dt {
                float: left;
                width: 100px;
                overflow: hidden;
                clear: left;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .project dd {
                margin-left: 112px;
            }
        }

        /* Sidebar navigation */
        .nav-sidebar {
            margin-right: -21px; /* 20px padding + 1px border */
            margin-bottom: 20px;
            margin-left: -20px;
        }

        .nav-sidebar > li > a {
            padding-right: 20px;
            padding-left: 20px;
        }

        .nav-sidebar > .active > a,
        .nav-sidebar > .active > a:hover,
        .nav-sidebar > .active > a:focus {
            color: #fff;
            background-color: #428bca;
        }

        /*
         * Main content
         */

        .main {
            padding: 20px;
        }

        .main .page-header {
            margin-top: 0;
        }

        /*
         * Placeholder dashboard ideas
         */

        .placeholders {
            margin-bottom: 30px;
            text-align: center;
        }

        .placeholders h4 {
            margin-bottom: 0;
        }

        .placeholder {
            margin-bottom: 20px;
        }

        .placeholder img {
            display: inline-block;
            border-radius: 50%;
        }

        h4, h5, h6,
        h1, h2, h3 {
            margin: 0;
        }

        ul, ol {
            margin: 0;
            padding: 0;
        }

        p {
            margin: 0;
        }

        html, body {
            font-family: 'Ubuntu', sans-serif;
            font-size: 100%;
            background: #ffffff;
        }

        body a {
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
            -ms-transition: 0.5s all;
        }

        body {
            padding-top: 0px;
        }

        a:focus {
            outline: thin dotted;
            outline: 0px auto -webkit-focus-ring-color;
            outline-offset: 0px;
            text-decoration: none;
        }

        /*-- header_top --*/
        .sidebar {
            /*background: #6ecadc;*/
            /*background-color: #c0e3e7;*/
            background: #3eb991;
            top: 0;
            padding: 2em 3em;
        }

        .sidebar h1 {
            font-size: 2.5em;
            font-weight: 700;
            margin-bottom: 1em;
            COLOR: #fff;
            font-family: 'Varela Round', sans-serif;

        }

        .sidebar img {
            border: 1px solid #fff;
            padding: 6px;
            width: 60%;
            /*height: 60%;*/
        }

        .details {
            margin-top: 2em;
            /*margin-left: 5em;*/
        }

        .details h3 {
            font-weight: 600;
            font-size: 1em;
            color: #fff;
        }

        .details p {
            color: #101010;
            font-size: 0.9em;
            margin: 5px 0 2em 0;
        }

        .details p a {
            color: #101010;
            font-size: 0.9em;
        }

        /*----*/
        .main {
            padding: 2em 0;
        }

        .content {
            margin-right: 3em;
        }

        .glyphicon {
            top: 1px;
        }

        .glyphicon-tasks:before, .glyphicon-file:before, .glyphicon-print:before, .glyphicon-envelope:before, .glyphicon-picture:before {
            margin-right: 9px;
            font-size: 14px;
            color: #6ecadc;
        }

        .details_header {
            padding-bottom: 2em;
        }

        .details_header ul li {
            display: inline-block;
        }

        .details_header ul li a {
            padding: 0 1em;
            color: #333;
        }

        .details_header ul li a:hover {
            color: #6ecadc;
        }

        .item {
            margin-bottom: 2em;
        }

        .clr {
            color: #FFF;
            padding: 5px 41px 5px 30px;
            display: inline-block;
        }

        .clr1 {
            /*background: #6ecadc;*/
            background: #e9a820;
        }

        .clr2 {
            background: #e9a820;
        }

        .clr3 {
            background: #3eb991;
        }

        .clr4 {
            background: #40a4b9;
        }

        .clr5 {
            background: #52c160;
        }


        .item h4 {
            color: #333;
            font-weight: 600;
            font-size: 1.4em;
            margin-bottom: 6px;
            font-family: 'Varela Round', sans-serif;
        }

        .item h5 {
            color: #666;
            font-weight: 600;
            font-size: 1.2em;
            margin-bottom: 1em;
        }

        .item h4 span, .item h5 span {
            font-size: 0.65em;
            margin-left: 5px;
            color: #999;
            font-weight: 400;
        }

        .item h6 {
            font-weight: 400;
            margin-bottom: 1.3em;
            font-size: 0.9em;
        }

        .item_detail {
            margin: 1.5em 0 0 2em;
            padding-bottom: 1.5em;
            border-bottom: 1px solid #d8e6f8;
        }

        .item_detail:last-child {
            border-bottom: none;
        }

        .item_detail p, dl.project dd {
            color: #666;
            font-weight: 300;
            line-height: 1.7em;
        }

        dl.project dd .label {
            margin-right: 5px;
        }

        .project dt {
            color: #8c8b8b;
            line-height: 1.7em;
        }

        .person_info li {
            list-style: none;
            color: #666;
            display: inline-block;
            white-space: nowrap;
            width: 36%;
        }

        .person_info li:before {
            content: "";
            width: 6px;
            height: 6px;
            border: 1px solid #999;
            border-radius: 10px;
            background: #aaa;
            display: inline-block;
            margin-right: 10px;
            float: left;
            margin-top: 7px;
        }


        .skill ul {
            list-style: none;
        }

        .skill ul > li {
            line-height: 32px;
            white-space: normal;
            /*overflow: hidden;*/
            list-style: decimal-leading-zero inside;
            color: #666;
            font-weight: 300;
        }

        .copywrite {
            padding-left: 2em;
            margin-top: 1em;
        }

        .copywrite p {
            color: #999;
            font-size: 0.9em;
        }

        .copywrite p a {
            color: #999;
        }

        .copywrite p a:hover {
            color: #6ecadc;
        }

        /*--responsive--*/
        @media (max-width: 1366px) {
            .sidebar h1 {
                font-size: 2em;
            }
        }

        @media (max-width: 1024px) {
            .sidebar {
                padding: 2em 17px;
                width: 20%;
            }

            .sidebar h1 {
                font-size: 1.6em;
            }

            .main {
                margin-left: 19.666667%;
                width: 80%;
            }
        }

        @media (max-width: 768px) {
            .sidebar {
                width: 22%;
            }

            .main {
                margin-left: 21.666667%;
                width: 78%;
            }

            .sidebar h1 {
                font-size: 1.4em;
            }

            .sidebar img {
                padding: 4px;
                width: 50%;
            }

            .details_header {
                padding-bottom: 2em;
            }

            .details_header ul li a {
                padding: 0 1em;
                font-size: 0.9em;
            }

            .item h3 {
                font-size: 1.2em;
            }

            .item_detail h4 {
                font-size: 1.1em;
            }

            .item_detail h5 {
                font-size: 1em;
            }

            .item_detail h6 {
                font-size: 0.8em;
            }

            .item_detail p {
                font-size: 0.8em;
            }

            .person_info li {
                width: 49%;
                font-weight: 300;
                line-height: 1.7em;
                font-size: 0.8em;
            }

            .skill ul li, dl.project dd {
                font-size: 0.85em;
            }

            .details p {
                font-size: 0.75em;
            }
        }

        @media (max-width: 736px) {
            .sidebar {
                width: 100%;
            }

            .main {
                margin-left: 0;
                width: 100%;
            }

            .sidebar_top {
                width: 30%;
                float: left;
                margin-right: 5%;
            }

            .details {
                width: 30%;
                float: right;
            }
        }

        @media (max-width: 640px) {
            .sidebar {
                width: 100%;
            }

            .main {
                margin-left: 0;
                width: 100%;
            }

            .sidebar_top {
                width: 30%;
                float: left;
                margin-right: 5%;
            }

            .details {
                width: 30%;
                float: right;
            }

            .sidebar img {
                width: 50%;
            }

            .details p {
                font-size: 0.9em;
                margin: 5px 0 1em 0;
            }

            .details h3 {
                font-size: 0.9em;
            }
        }

        @media (max-width: 600px) {
            .sidebar_top {
                width: 32%;
            }

            .sidebar img {
                width: 40%;
            }
        }

        @media (max-width: 568px) {
            .details_header ul li a {
                padding: 0 0.5em;
                font-size: 0.9em;
            }
        }

        @media (max-width: 480px) {
            .content {
                margin-right: 2em;
            }

            .glyphicon-tasks:before, .glyphicon-file:before, .glyphicon-print:before, .glyphicon-envelope:before, .glyphicon-picture:before {
                margin-right: 6px;
                font-size: 12px;
            }

            .details_header ul li a {
                padding: 0 0.5em;
                font-size: 0.85em;
            }

            .details {
                width: 36%;
            }

            .sidebar h1 {
                font-size: 1.3em;
            }

            .sidebar_top {
                width: 38%;
            }

            .copywrite {
                padding-left: 1em;
            }
        }

        @media (max-width: 414px) {
            .sidebar_top {
                width: 45%;
            }

            .sidebar img {
                width: 40%;
            }

            .details {
                width: 42%;
            }

            .details_header {
                padding-bottom: 2em;
            }

            .details_header ul li a {
                padding: 0 0.3em;
                font-size: 0.75em;
            }
        }

        @media (max-width: 384px) {
            .sidebar h1 {
                font-size: 1.2em;
            }

            .details {
                width: 45%;
            }

            .details_header ul {
                text-align: center;
            }

            .details_header ul li a {
                padding: 0 1em;
                font-size: 0.75em;
            }

            .main {
                padding: 1em 0 2em 0;
            }

            .item_detail {
                padding: 0;
                margin: 1em 1em;
            }

            .item_detail h4 {
                font-size: 0.9em;
            }

            .item_detail h5 {
                font-size: 0.8em;
            }

            .item_detail h6 {
                font-size: 0.6em;
            }

            .item h3 {
                font-size: 1em;
            }

            .clr {
                padding: 5px 98px 5px 16px;
            }

            .copywrite p {
                font-size: 0.7em;
            }
        }

        @media (max-width: 375px) {
            .sidebar h1 {
                font-size: 1em;
            }

            .sidebar img {
                width: 40%;
            }

            .details h3 {
                font-size: 0.8em;
            }

            .details p {
                font-size: 0.75em;
                margin: 5px 0 0.5em 0;
            }

            .sidebar {
                padding: 1.5em 17px 1em 17px;
            }

            .details_header {
                /*padding: 0 0 0 1em;*/
                text-align: center;
            }

            .details_header ul li a {
                line-height: 2em;
            }
        }

        @media (max-width: 320px) {
            .sidebar_top {
                width: 50%;
            }

            .sidebar img {
                width: 40%;
            }

            .details h3 {
                font-size: 0.7em;
            }

            .content {
                margin-right: 1em;
            }

            .details_header ul li a {
                padding: 0 0.5em;
                font-size: 0.75em;
            }
        }
    </style>
</head>

<body>


<!-- header -->
<div class="col-md-3 sidebar">
    <div class="sidebar_top">
        <h1>杨海权</h1>
        <!--        style="height: 200px; width: 150px;"-->
        <img src="{{ url_for('static',filename='images/header.png') }}" alt=""/>
    </div>
    <div class="details">
        <h3>手机</h3>
        <p><a href="">130 6859 1100</a></p>
        <h3>邮箱</h3>
        <p><a href="mailto:107456621@qq.com">1074566721@qq.com</a></p>
    </div>
    <div class="clearfix"></div>
</div>
<div class="col-md-8 col-md-offset-3  main">
    <div class="content">
        <div class="details_header">
            <ul>
                <li>
                    <a href="https://gitee.com/yang6030/dashboard/projects">
                        <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
                        Gitee
                    </a>
                </li>
                <li>
                    <a href="http://8.129.88.219:5000">
                        <span class="glyphicon glyphicon-tasks " aria-hidden="true"></span>
                        Blog
                    </a>
                </li>
                <li>
                    <a href="mailto:1074566721@qq.com">
                        <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                        Email me
                    </a>
                </li>
            </ul>
        </div>
        <div class="item">
            <h3 class="clr clr1">个人信息</h3>
            <div class="item_detail">
                <ul class="person_info">
                    <li>学历：专科</li>
                    <li>年龄：23</li>
                    <li>专业：软件技术</li>
                    <li>学校：广东文理职业学院</li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="item">
            <h3 class="clr clr3">专业技能</h3>
            <div class="item_detail">
                <div class="skill">
                    <ul>
                        <li>编程语言：Python</li>
                        <li>常用技术栈：requests，PyQt5</li>
                        <li>前端：HTML/CSS/JavaScript</li>
                        <li>常用框架：Django、Flask</li>
                        <li>数据库：MySQL、redis</li>
                        <li>Linux基本操作，服务器环境搭建及项目部署。</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="item">
            <h3 class="clr clr4">项目经验</h3>
            <div class="item_detail">
                <h5>多平台原始视频下载器</h5>
                <dl class="project">
                    <dt>开发环境</dt>
                    <dd>
                        <span class="label label-default">PyCharm</span>
                        <span class="label label-default">Chrome</span>
                    </dd>
                    <div class="clearfix"></div>
                    <dt>技术架构</dt>
                    <dd>
                        <span class="label label-default">Python</span>
                        <span class="label label-default">PyQt5</span>
                        <span class="label label-default">request</span>
                    </dd>
                    <div class="clearfix"></div>
                    <dt>开发时间</dt>
                    <dd>2020.10 – 2020.10</dd>
                    <dt>项目描述</dt>
                    <dd>
                        <p>该项目主要为一些分享、收藏爱好者提供方便，通过用户分享的链接下载原始无水印的视频；涵盖广泛——支持“抖音”、“快手”、“微视”、“皮皮搞笑”常用娱乐短视频平台；</p>
                        <p>已将个人经验以及具体功能分享至博客，更多详情请移步<a
                                href="https://blog.csdn.net/qq_41707308/article/details/109293116">博客</a></p>
                    </dd>
                    <dt>工作描述</dt>
                    <dd>1. PyQt5搭载软件界面，可视化图形界面操作轻松简单</dd>
                    <dd>2. 针对多个常用短视频平台，分析不同爬取策略</dd>
                    <dd>3. 使用多线程技术，支持同时下载多个视频。</dd>
                    <dt>项目难点</dt>
                    <dd>各个平台反爬机制各式各异</dd>
                    <!--                    <dd>2. 部分参数并不需要传递，传递了反而会无法获取视频所在的url</dd>-->
                    <!--                    <dd>3. 个别平台要求浏览器标识必须是移动设备才可接收到正确的response</dd>-->
                    <dt>博客地址</dt>
                    <dd>
                        <a href="https://blog.csdn.net/qq_41707308/article/details/109293116">https://blog.csdn.net/qq_41707308/article/details/109293116</a>
                    </dd>
                    <dt>gitee仓库</dt>
                    <dd>
                        <a href="https://gitee.com/yang6030/short_video_downloader.git">https://gitee.com/yang6030/short_video_downloader.git</a>
                    </dd>
                </dl>
                <div class="clearfix"></div>
            </div>
            <div class="item_detail">
                <h5>PyQt12306抢票软件</h5>
                <dl class="project">
                    <dt>开发环境</dt>
                    <dd>
                        <span class="label label-default">PyCharm</span>
                        <span class="label label-default">Chrome</span>
                    </dd>
                    <div class="clearfix"></div>
                    <dt>技术架构</dt>
                    <dd>
                        <span class="label label-default">Python</span>
                        <span class="label label-default">PyQt5</span>
                        <span class="label label-default">request</span>
                    </dd>
                    <div class="clearfix"></div>
                    <dt>开发时间</dt>
                    <dd>2020.03 – 2020.4</dd>
                    <dt>项目描述</dt>
                    <dd>
                        <p>该项目为解决用户（节日期间）难以购买车票问题，简化购票流程以及12306的复杂界面操作；自动进行抢票动作，让你买票快人一步。</p>
                    </dd>
                    <dt>工作描述</dt>
                    <dd>1. 使用pyqt5搭建可视化界面，操作简单。</dd>
                    <dd>2. 对12306的数据，进行数据清洗和展示，使用本地json文件缓存机制对数据进行持久化保存。</dd>
                    <dd>3. 利用定时器功能完实现自动抢票功能。</dd>
                    <dd>4. 在购票中能够实现选定通信录中的联系人、成功购票发送短信等功能</dd>
                    <dt>项目难点</dt>
                    <dd>1. 图片验证码base64加密。使用自带base64库解密，也可截取部分url</dd>
                    <dd>2. 点击图中物体打锚点。重写PyQt5原生label标签，捕捉鼠标点击事件并计算坐标得出</dd>
                    <dd>3. 12306伪登录“成功”反爬机制。反复分析找出所需token值，利用正则表达式提取</dd>
                    <dd>4. 短时间内多次请求操作，造成当天能该账号无法登录12306。限制了测试次数，为爬取增加难度</dd>
                    <dd>5. 抢票请求限制时间间隔。使用时钟定时器设置模拟点击时间间隔解决</dd>
                    <dt>gitee仓库</dt>
                    <dd>
                        <a href="https://gitee.com/yang6030/pyqt12306.git">https://gitee.com/yang6030/pyqt12306.git</a>
                    </dd>
                </dl>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="item">
            <h3 class="clr clr5">自我评价</h3>
            <div class="item_detail">
                <div class="skill">
                    <ul>
                        <li>工作态度认真严谨，踏实耐心</li>
                        <li>具有较高的团队合作精神，编码习惯良好</li>
                        <li>逻辑思维能力强，思路清晰，学习能力强</li>
                        <li>肯吃苦，不怕累，能承受较强的工作压力。成为一名优秀的软件开发工程师是我的理想。</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="copywrite">
            <p>© 2020 Developer.Yang</p>
        </div>
    </div>
</div>


</body>

</html>